<template>
  <div>
    <div>计算结果：{{ $store.state.num }}</div>
    计算结果mapState:{{ num }}
    <div>获取结果:{{ $store.getters.getNum }}</div>
    <div>获取结果:{{ getNum() }}</div>
    <!--  方法一-->
    <!-- <div>
      <button @click="add">+1</button>
    </div>
    <div>
      <button @click="jian">-1</button>
    </div> -->
    <!-- 方法二 -->
    <div>
      <button @click="add(1)">+1</button>
    </div>
    <div>
      <button @click="jian(1)">-1</button>
    </div>
    <div>
      <button @click="asyncAdd(600)">异步调用</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations,mapGetters, mapState } from "vuex";
export default {
  /*
        获取所有的数据
        方法一： $store
        方法二：mapState 在计算属性中进行映射
        设置store中的数据  同步方法
        方法一：$store.commit('方法名称',参数)
        方法二：...mapMutations在methods使用 映射方法到本地组件methods中

        设置store中的数据  异步方法
        （1）$store.dispatch('方法名称'，参数)
         (2) ...mapActions映射到组件的方法使用
         getter获取store中的数据
        方法一:$store.getter
        方法二: ...mapGetters 映射到计算属性中  
    */
  mounted() {
    console.log(this.$store);
    console.log(this.$store.getters.getNum);
  },
  computed: {
    ...mapState(["num"]),
  },
  methods: {
    //   方法一
    // add() {
    //   this.$store.commit("add", 1);
    // },
    // jian() {
    //   this.$store.commit("jian", 1);
    // },
    // 方法二
    ...mapMutations(["add", "jian"]),
    ...mapActions(["asyncAdd"]),
    ...mapGetters(['getNum'])
    // asyncAdd(){
    //     this.$store.dispatch('asyncAdd',1)
    // }
  },
};
</script>

<style lang="scss" scoped></style>
